<template>
    <div>
        <div class="flex justify-between padding-tb" style="border-bottom: 2px #e8e8e8 solid;">
            <div class="menu-name">菜单配置</div>
            <div class="menu-del" @click="$emit('delMenu')">删除菜单</div>
        </div>
        <el-form label-width="120px" size="small" class="margin-top-lg">
            <el-form-item label="菜单名称">
                <el-input name="name" placeholder="请输入菜单名称" v-model="button.name" @input="checkMenuName(button.name)"
                          style="width: 320px;"/>
            </el-form-item>
            <div v-show="!button.subButtons || button.subButtons.length === 0">
                <el-form-item label="菜单内容">
                    <el-select v-model="button.type" style="width: 320px;">
                        <el-option value="view" label="跳转网页(view)"/>
                        <el-option value="media_id" label="发送消息(media_id)"/>
                        <!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>-->
                        <el-option value="miniprogram" label="打开指定小程序(miniprogram)"/>
                        <el-option value="click" label="自定义点击事件(click)"/>
                        <el-option value="scancode_push" label="扫码上传消息(scancode_push)"/>
                        <el-option value="scancode_waitmsg" label="扫码提示下发(scancode_waitmsg)"/>
                        <el-option value="pic_sysphoto" label="系统相机拍照(pic_sysphoto)"/>
                        <el-option value="pic_photo_or_album" label="弹出拍照或者相册(pic_photo_or_album)"/>
                        <el-option value="pic_weixin" label="弹出微信相册(pic_weixin)"/>
                        <el-option value="location_select" label="弹出地理位置选择器(location_select)"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="页面地址" v-if="button.type === 'view'">
                    <el-tooltip
                        content="订阅者点击该子菜单会跳到以下链接"
                    >
                        <el-input placeholder="请输入链接地址" v-model="button.url" style="width: 320px;"/>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="media_id" v-if="button.type === 'media_id'">
                    <el-tooltip
                        content="订阅者点击该菜单会收到以下图文消息">
                        <!--                        <el-input placeholder="图文消息media_id" v-model="button.mediaId" style="width: 320px;"/>-->
                        <el-input v-model="button.mediaId" ref="mediaInput" @focus="selDia = true"/>
                        <!--                        <el-input placeholder="图文消息media_id" class="menu-input-text" v-model="button.mediaId" style="width: 320px;"/>-->
                        <!--                        <label>12341432432{{button.mediaId}}</label>-->
                        <!--                        <el-button @click="handlerOpenMaterDia">选择素材</el-button>-->
                    </el-tooltip>
                </el-form-item>
                <div v-if="button.type === 'miniprogram'">
                    <el-form-item label="小程序appId">
                        <el-tooltip
                            content="订阅者点击该子菜单会跳到以下小程序"
                        >
                            <el-input placeholder="小程序的appId（仅认证公众号可配置）" class="menu-input-text" v-model="button.appId"
                                      style="width: 320px;"/>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="小程序路径">
                        <el-tooltip
                            content="订阅者点击该子菜单会跳到以下小程序"
                        >
                            <el-input placeholder="小程序的页面路径 pages/index/index" class="menu-input-text"
                                      v-model="button.pagePath" style="width: 320px;"/>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="备用网页">
                        <el-tooltip
                            content="旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。">
                            <el-input placeholder="" class="menu-input-text" v-model="button.url"
                                      style="width: 320px;"/>
                        </el-tooltip>
                    </el-form-item>
                </div>
                <el-form-item v-else label="菜单KEY值">
                    <el-tooltip
                        content="用于消息接口推送，不超过128字节"
                    >
                        <el-input placeholder="" class="menu-input-text" v-model="button.key" style="width: 320px;"/>
                    </el-tooltip>
                </el-form-item>
            </div>
        </el-form>

        <mater-select-dialog
            :visible.sync="selDia"
            mater-type="all"
            @selected="handlerMaterDiaSelected"
        />
    </div>
</template>
<script>
import MaterSelectDialog from "@/components/dialog/wx/materSelectDialog";

export default {
    components: {MaterSelectDialog},
    props: {
        selectedMenuLevel: {
            type: Number,
            default: 1
        },
        button: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            menuNameBounds: false,//菜单长度是否过长
            selDia:false
        }
    },
    methods: {
        //检查菜单名称长度
        checkMenuName: function (val) {
            if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 10) {
                this.menuNameBounds = false
            } else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 16) {
                this.menuNameBounds = false
            } else {
                this.menuNameBounds = true
            }
        },
        //获取菜单名称长度
        getMenuNameLen: function (val) {
            var len = 0;
            for (var i = 0; i < val.length; i++) {
                var a = val.charAt(i);
                a.match(/[^\x00-\xff]/ig) != null ? len += 2 : len += 1;
            }
            return len;
        },
        /**
         * 素材选择器选中回调事件
         * @param data
         */
        handlerMaterDiaSelected(data){
            this.button.mediaId = data.mediaId
        }
    }
}
</script>